<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.css0{
	height: 30px;
	border: solid aqua 1px;
	color: darkblue;
}
.css1{
	background-color: darkorchid;
}
.css2{
	color: coral;
}

.css4{
	font-size: 28px;
}
</style>
	<body>
		<div id="app">
			<span>本例我们测试在组件的class绑定时是如何和原组件的class进行合并的<br/></span>
			<vue-item v-bind:items="items" :class="[css1, css2]" class="css4"></vue-item>
		</div>
	</body>
<script type="text/javascript">
//要先注册组件再实例化
Vue.component('vue-item', {
	props: ['items'],  //props定义支持的参数绑定
	template: '<ul class="css0"><li v-for="item in items">{{item.name}}</li></ul>'
});
var app = new Vue({
	el: '#app',
	data: {
		items: [
			{name: "高等数学"},
			{name: "大学英语"},
			{name: "心理教育"}
		],
		css1: 'css1',
		css2: 'css2'
	}
});
</script>
</html>